<#assign basePath=request.contextPath />

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <#include '/common/common-css.html'>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>角色 <small> 列表</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a href="javascript: location.replace(location.href);">
                                <i class="fa fa-refresh"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                    	<div class="col-md-4 col-md-offset-4">
                    		<div class="input-group">
				                <input type="text"  id="searchContent" class="form-control"> <span class="input-group-btn"> <button type="button" id="search" class="btn btn-primary">搜索角色
				                </button></span>
				            </div>
                    	</div>
                    	<div class="col-md-12">
                    		<div class="btn-group" style="margin-bottom: 6px;">
	                            <button class="btn btn-primary btn-sm" type="button" id="add"><span class="glyphicon glyphicon-plus"></span> 添加</button>
	                            <button class="btn btn-danger btn-sm" type="button" id="batchDel"><span class="glyphicon glyphicon-trash"></span> 删除</button>
	                            <button class="btn btn-info btn-sm" type="button" id="refresh"><span class="fa fa-refresh"></span> 刷新</button>
	                        </div>
                    	</div>
                        <table id="myTab" class="table table-striped table-bordered table-hover dataTables-example" >
                            <thead>
                                <tr>
									<th><input type="checkbox"></th>
									<th>ID</th>
									<th>角色名</th>
									<th>描述</th>
									<th>创建时间</th>
									<th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <#include '/common/common-js.html'>
    <script type="text/javascript">
    $(function(){
    	table = $('#myTab').DataTable({
    		ajax: {
    	        "url": '${basePath}/role/list',
    	        "type": "POST"
    	    },
    	    "autoWidth": true,
    	    "order": [[ 1, 'asc' ]], //为了解决第一列checkbox小箭头问题
    	    "columnDefs": [
           		{
                    "defaultContent": "",
                  	"targets": "_all"
                },
                {
   					orderable:false,//禁用排序
   					targets:[0]   //指定的列
   			 	},
   				{ 
   			 		//为列设置样式
   			 		className: "text-center", 
   			 		"targets": [0]
   				}
            ],	   
    	    columns: [ 
    	    	{
            	    "data": "id",
                    render: function(data) {
                        return '<input type="checkbox" value="'+ data +'" name="">';
                    }
                },
    			{	"data" : "id"	},
    			{	"data" : "name"	},
    			{	"data" : "description" },
    			{
    				"data" : "createTime",
    				render: function(data) {
	                    return (new Date(data)).Format("yyyy-MM-dd");
                    }			
    			},
    			{
    				"data" : "id",
    				render : function(data){
    					return '<button type="button" class="btn btn-success btn-xs" onclick="edit('+ data +')"><i class="fa fa-edit"></i> 修改</button>' + 
    					'<span style="margin-right: 5px"></span>'+
                        '<button type="button" class="btn btn-danger  btn-xs" onclick="del(this,'+ data +')"><i class="fa fa-remove"></i> 删除</button>' + 
                        '<span style="margin-right: 5px"></span>'+ 
                        '<button type="button" class="btn btn-info  btn-xs" onclick="permission('+ data +')"><i class="fa fa-users"></i> 权限</button>'
    				}
    			}
    	    ]
    	});
    	
    	$("#refresh").on("click", function(){
    		table.ajax.reload();
    	});
    	
   		/* 搜索 */
       	$("#search").on("click", function(){
       		var searchContent = $("#searchContent").val();
       		table.search(searchContent).draw();
       	});
    	
    	
    	$("#add").on("click", function(){
    		layer.open({
    			type: 2,
    			area: ["50%", "80%"],
    			fix: false, //不固定
    			shadeClose: true, //是否点击遮罩关闭
    			maxmin: true,
    			title: "添加角色",
    			content: "${basePath}/role/add"
    		});
    	});
    	
    	
    	//批量删除
    	$("#batchDel").on("click", function(){
    		layer.confirm('确认要删除吗？',function(){
	    		var ids = new Array();
	    		$("tbody").find("input:checkbox:checked").each(function(){
	    			ids.push($(this).val());
	    		});
	    		
	    		if(ids.length > 0){
	    			$.ajax({
	    				type: 'POST',
	    				url: "${basePath}/role/batchDel",
	    				data: JSON.stringify(ids),
	    				contentType: "application/json; charset=utf-8",
	    				dataType: 'json',
	    				success: function(data){
	    					if(data.error){
	    						layer.msg(data.msg,{icon:2,time:1000});
	    					}else{
	    						if(data > 0){
		    						$("tbody").find("tr").each(function(){
			    						var id = $(this).find("td:eq(1)").text();
			    						if($.inArray(id, ids) > -1){
			    							$(this).remove();
			    						}
			    					});
			    					$('input:checkbox').removeAttr('checked');
			    					layer.msg('批量删除成功!',{icon:1,time:1000});
		    					}
	    					}
	    				},
	    				error:function(e) {
	    					console.log(e);
	    				}
	    			});
	    		}else{
	    			layer.alert("请选择要删除的用户");
	    		}
    		});
    	});
    });
    
    function permission(id){
    	layer.open({
			type: 2,
			area: ["30%", "85%"],
			fix: false, //不固定
			shadeClose: true, //是否点击遮罩关闭
			maxmin: true,
			title: "分配权限",
			content: "${basePath}/permission/tree?id=" + id
		});
    }
    
    //修改
    function edit(id){
    	layer.open({
			type: 2,
			area: ["50%", "80%"],
			fix: false, //不固定
			shadeClose: true, //是否点击遮罩关闭
			maxmin: true,
			title: "修改角色",
			content: "${basePath}/role/edit?id=" + id
		});
    }
    
    //删除
    function del(obj, id){
    	layer.confirm('确认要删除吗？',function(index){
    		$.ajax({
    			type: 'POST',
    			url: '${basePath}/role/delete?t=' + Math.random(),
    			data : {"id" : id},
    			dataType: 'json',
    			success: function(data){
    				if(data.error){
						layer.msg(data.msg,{icon:1,time:1000});
					}else{
						if(1 == data){
	    					$(obj).parents("tr").remove();
	    					layer.msg('已删除!',{icon:1,time:1000});
	    				}else{
	    					layer.msg('删除失败',{icon:1,time:1000});
	    				}
					}
    			},
    			error:function(e) {
    				console.log(e);
    			}
    		});		
    	});
    }
    </script>
</body>
</html>
